<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas id="physicsCanvas" width="600" height="450"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // --- Helper function for drawing arrows ---
    function drawArrow(ctx, fromx, fromy, tox, toy) {
        const headlen = 10; // length of head in pixels
        const dx = tox - fromx;
        const dy = toy - fromy;
        const angle = Math.atan2(dy, dx);
        ctx.beginPath();
        ctx.moveTo(fromx, fromy);
        ctx.lineTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(tox, toy);
        ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }

    // --- Drawing Parameters ---
    const centerX = 250;
    const centerY = 200;
    const radius = 100;
    const stepX = 380;
    const stepHeight = 40;
    const groundY = centerY + radius;
    const stepTopY = groundY - stepHeight;

    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    
    // --- Draw Ground and Step ---
    ctx.lineWidth = 2;
    // Lower ground
    ctx.beginPath();
    ctx.moveTo(50, groundY);
    ctx.lineTo(stepX, groundY);
    ctx.stroke();

    // Step vertical face
    ctx.beginPath();
    ctx.moveTo(stepX, groundY);
    ctx.lineTo(stepX, stepTopY);
    ctx.stroke();

    // Step top surface
    ctx.beginPath();
    ctx.moveTo(stepX, stepTopY);
    ctx.lineTo(550, stepTopY);
    ctx.stroke();

    // --- Draw Hatching ---
    ctx.lineWidth = 1;
    const hatchSpacing = 15;
    const hatchLength = 10;
    // Lower ground hatching
    for (let i = 50 + hatchSpacing; i < stepX; i += hatchSpacing) {
        ctx.beginPath();
        ctx.moveTo(i, groundY);
        ctx.lineTo(i - hatchLength, groundY + hatchLength);
        ctx.stroke();
    }
    // Step vertical face hatching
    for (let i = stepTopY + hatchSpacing; i < groundY; i += hatchSpacing) {
        ctx.beginPath();
        ctx.moveTo(stepX, i);
        ctx.lineTo(stepX - hatchLength, i + hatchLength);
        ctx.stroke();
    }
    // Top step hatching
    for (let i = stepX + hatchSpacing; i < 550; i += hatchSpacing) {
        ctx.beginPath();
        ctx.moveTo(i, stepTopY);
        ctx.lineTo(i - hatchLength, stepTopY + hatchLength);
        ctx.stroke();
    }

    // --- Draw Cylinder ---
    ctx.lineWidth = 2.5;
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
    ctx.stroke();

    // --- Draw Labels and Vectors ---

    // Center O
    ctx.font = '24px Times New Roman';
    ctx.fillText('O', centerX - 25, centerY + 8);

    // Velocity v₀
    ctx.lineWidth = 2;
    drawArrow(ctx, centerX, centerY, centerX + 100, centerY);
    ctx.font = 'italic 22px Times New Roman';
    ctx.fillText('v', centerX + 45, centerY - 12);
    ctx.font = 'italic 16px Times New Roman';
    ctx.fillText('0', centerX + 58, centerY - 7);

    // Angular velocity ω₀
    ctx.lineWidth = 2;
    const omegaRadius = radius * 0.6;
    const startAngle = 1.4 * Math.PI;
    const endAngle = 0.9 * Math.PI;
    ctx.beginPath();
    ctx.arc(centerX, centerY, omegaRadius, startAngle, endAngle, true); // true for counter-clockwise arc
    ctx.stroke();
    // Arrow head for ω₀
    const arrow_x = centerX + omegaRadius * Math.cos(endAngle);
    const arrow_y = centerY + omegaRadius * Math.sin(endAngle);
    const tangent = endAngle + Math.PI / 2; // Tangent angle for CCW arc
    const headlen = 10;
    ctx.beginPath();
    ctx.moveTo(arrow_x, arrow_y);
    ctx.lineTo(arrow_x - headlen * Math.cos(tangent - Math.PI / 6), arrow_y - headlen * Math.sin(tangent - Math.PI / 6));
    ctx.moveTo(arrow_x, arrow_y);
    ctx.lineTo(arrow_x - headlen * Math.cos(tangent + Math.PI / 6), arrow_y - headlen * Math.sin(tangent + Math.PI / 6));
    ctx.stroke();
    // Label ω₀
    ctx.font = 'italic 22px Times New Roman';
    ctx.fillText('ω', centerX - radius * 0.6, centerY - radius * 0.35);
    ctx.font = 'italic 16px Times New Roman';
    ctx.fillText('0', centerX - radius * 0.6 + 15, centerY - radius * 0.35 + 5);

    // Radius R
    ctx.save();
    ctx.lineWidth = 2;
    ctx.setLineDash([5, 5]);
    ctx.beginPath();
    ctx.moveTo(centerX, centerY);
    const angle_R = 1.3 * Math.PI; // Angle for the dashed line
    const endX_R = centerX + radius * Math.cos(angle_R);
    const endY_R = centerY + radius * Math.sin(angle_R);
    ctx.lineTo(endX_R, endY_R);
    ctx.stroke();
    ctx.restore();
    // Label R
    ctx.font = '24px Times New Roman';
    const labelX_R = centerX + radius * 0.55 * Math.cos(angle_R);
    const labelY_R = centerY + radius * 0.55 * Math.sin(angle_R);
    ctx.fillText('R', labelX_R - 25, labelY_R + 5);

    // Step label A
    ctx.font = '24px Times New Roman';
    ctx.fillText('A', stepX - 25, stepTopY + 25);

    // Height h
    ctx.lineWidth = 1.5;
    const h_line_x = stepX + 40;
    // Main vertical line
    ctx.beginPath();
    ctx.moveTo(h_line_x, stepTopY);
    ctx.lineTo(h_line_x, groundY);
    ctx.stroke();
    // Top tick
    ctx.beginPath();
    ctx.moveTo(h_line_x - 5, stepTopY);
    ctx.lineTo(h_line_x + 5, stepTopY);
    ctx.stroke();
    // Bottom tick
    ctx.beginPath();
    ctx.moveTo(h_line_x - 5, groundY);
    ctx.lineTo(h_line_x + 5, groundY);
    ctx.stroke();
    // Label h
    ctx.font = 'italic 22px Times New Roman';
    ctx.fillText('h', h_line_x + 10, groundY - stepHeight / 2 + 8);

    // Caption
    ctx.font = '20px SimHei';
    ctx.textAlign = 'center';
    ctx.fillText('力图 6.6.1', centerX, groundY + 50);

</script>
</body>
</html>